<template>
    <div class="follow-stage-config">
      <el-card class="config-card">
        <div class="input-section">
          <div class="section-title">输入阶段值(每行一个):</div>
          <el-input
            type="textarea"
            v-model="formData.stagesText"
            :rows="8"
            placeholder="请输入跟进阶段，每行一个阶段"
            resize="none"
            @input="handleStagesInput"
          />
        </div>
        
        <div class="preview-section">
          <div class="section-title">阶段预览:</div>
          <div class="stage-tags">
            <el-tag
              v-for="(stage, index) in formData.stages"
              :key="index"
              type="info"
              class="stage-tag"
            >
              {{ stage }}
            </el-tag>
            <div v-if="formData.stages.length === 0" class="empty-tip">
              暂无阶段数据
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    name: 'FollowStageConfig',
    props: {
      configData: {
        type: Object,
        default: () => ({})
      }
    },
    data() {
      return {
        formData: {
          stages: ["初步沟通", "建立互信", "初步意向", "意向成交", "正式成交"],
          stagesText: '初步沟通\n建立互信\n初步意向\n意向成交\n正式成交'
        }
      }
    },
    watch: {
      configData: {
        immediate: true,
        handler(newVal) {
          if (newVal && newVal.stages) {
            this.formData.stages = [...newVal.stages]
            this.formData.stagesText = newVal.stages.join('\n')
          }
        }
      }
    },
    methods: {
      handleStagesInput() {
        this.formData.stages = this.formData.stagesText
          .split('\n')
          .filter(stage => stage.trim() !== '')
          .map(stage => stage.trim())
      },
      getFormData() {
        return {
          stages: this.formData.stages
        }
      },
      handleReset() {
        this.formData.stages = []
        this.formData.stagesText = ''
      }
    }
  }
  </script>
  
  <style scoped>
  .follow-stage-config {
    padding: 20px;
  }
  
  .config-card {
    padding: 20px;
  }
  
  .input-section {
    margin-bottom: 30px;
  }
  
  .section-title {
    margin-bottom: 10px;
    color: #606266;
    font-size: 14px;
    font-weight: 500;
  }
  
  .preview-section {
    border-top: 1px solid #ebeef5;
    padding-top: 20px;
  }
  
  .stage-tags {
    min-height: 60px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
  }
  
  .stage-tag {
    margin: 2px;
  }
  
  .empty-tip {
    color: #c0c4cc;
    font-style: italic;
  }
  </style>